<template>
  <div class="total-liner">
    <EchartTemp :options="options" :width="eWidth" :height="eHeight"></EchartTemp>
  </div>
</template>

<script>
import EchartTemp from "@/common/echartTemp";

export default {
  name: "TotalLiner",
  props: {
    logAreaData:[]
  },
  data() {
    return {
      options:{},
      eWidth:"100%",
      eHeight:"200px"
    }
  },
  components: { EchartTemp },
  watch: {
    logAreaData:{
      handler(val) {
        this.drawEchart(val)
      },
      deep: true,
      immediate: true, // 初次监听即执行
    }
  },
  mounted() {
  },
  methods: {
    drawEchart(val) {
      let xData = []
      let currConfirm = []
      let totalConfirm = []
      let totalDead = []
      let totalHeal = []
      for (let data in val) {
        let area = val[data]
        xData.push(area.createDate)
        currConfirm.push(parseInt(area.totalConfirm) - parseInt(area.totalDead) - parseInt(area.totalHeal))
        totalConfirm.push(parseInt(area.totalConfirm))
        totalDead.push(parseInt(area.totalDead))
        totalHeal.push(parseInt(area.totalHeal))
      }
      this.options = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          textStyle:{color: '#fff'},
          data: ['现存确诊','累计确诊','累计死亡','累计治愈']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#fff',
            }
          },
          data: xData
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#fff',
            }
          },
        },
        series: [
          {
            name: '现存确诊',
            type: 'line',
            stack: 'Total',
            smooth: true,
            data: currConfirm
          },
          {
            name: '累计确诊',
            type: 'line',
            stack: 'Total',
            smooth: true,
            data: totalConfirm
          },
          {
            name: '累计死亡',
            type: 'line',
            stack: 'Total',
            smooth: true,
            data: totalDead
          },
          {
            name: '累计治愈',
            type: 'line',
            stack: 'Total',
            smooth: true,
            data: totalHeal
          },
        ]
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>
